<template>
	<view class="view">
		<view class="head">
			<image src="/static/images/ic_logo.png" mode="aspectFit"></image>
			<view>{{tip}}</view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<view class="writeBox">
			<view class="row">
				<label for="phone">手机号</label>
				<input v-model.number="phone" id="phone" type="number" maxlength="11" placeholder="请输入手机号" />
			</view>
			<view class="row">
				<label for="code">验证码</label>
				<input v-model="code" id="code" type="number" maxlength="6" placeholder="请输入验证码" />
				<span @click="time == 60 ? getcode() : ''">{{ time == 60 ? '获取验证码' : time + 's后重新获取' }}</span>
			</view>
		</view>
		<button @click="login" type="warn">登录</button>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="login-but">绑定手机号</button>
		<!-- #endif -->
		<!-- 完善个人资料弹窗 -->
		<improve-user-info ref="improveUserInfo" @close="userInfo()"></improve-user-info>
	</view>
</template>

<script>
	import ImproveUserInfo from '@/components/improve-user-info/improve-user-info.vue'
	import {
		sendSms,
		loginBySms,
		wxBindPhone,
		weChatBindPhone,
		getUserInfo
	} from '@/apis/request.js';

	export default {
		components: {
			ImproveUserInfo
		},
		data() {
			return {
				tip: this.$shareContent || '微米陪诊',
				phone: '',
				code: '',
				time: 60,
				type: 2,
				unionId: '',
				openId: ''
			};
		},
		onLoad(options) {
			this.type = options.type || 2;
			this.unionId = options.unionId || '';
			this.openId = options.openId || '';
		},
		methods: {
			/**
			 * 获取短信验证码
			 */
			getcode() {
				if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				sendSms({
					phone: this.phone,
					type: this.unionId ? 1 : 0
				}).then(res => {
					var timer = setInterval(() => {
						this.time--;
						if (this.time == 0) {
							clearInterval(timer);
							this.time = 60;
						}
					}, 1000);
				});
			},
			/**
			 * 获取手机号
			 * @param {Object} e 获取手机号结果
			 */
			getPhoneNumber(e) {
				wxBindPhone({
					code: e.detail.code,
					unionId: this.unionId,
					openId: this.openId
				}).then(res => {
					this.loginSuccess(res);
				});
			},
			/**
			 * 手机号登录或绑定手机号
			 */
			login() {
				let that = this;
				if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if (!this.phone) {
					uni.showToast({
						title: '手机号码不能为空',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if (!this.code) {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if (this.unionId) {
					//微信绑定手机号码
					weChatBindPhone({
						captCha: this.code,
						phone: this.phone,
						type: this.type,
						unionId: this.unionId,
						openId: this.openId
					}).then(res => {
						this.loginSuccess(res);
					});
				} else {
					//手机号码登录
					loginBySms({
						captCha: this.code,
						phone: this.phone
					}).then(res => {
						this.loginSuccess(res);
					});
				}
			},
			/**
			 * 登录成功操作
			 * @param {Object} result
			 */
			loginSuccess(result) {
				const {
					token,
					user
				} = result;
				uni.setStorageSync('token', token);
				uni.setStorageSync('userInfo', user);
				if (user.registeredStatus == 1) {
					uni.switchTab({
						url: '/pages/index/main'
					});
				} else {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: '/pages/LoginPages/perfectInfo/main'
					});
					// #endif
					//弹窗进行完善资料处理【旧需求和APP一致是跳转完善个人资料界面】
					// #ifndef APP-PLUS
					this.$refs.improveUserInfo.open();
					// #endif
				}
			},
			/**
			 * 获取更新后的用户信息并更新
			 */
			userInfo() {
				getUserInfo({}).then(res => {
					uni.setStorage({
						key: 'userInfo',
						data: res,
						success() {
							uni.reLaunch({
								url: '/pages/index/main'
							});
						}
					});
				}).catch(err => {
					this.$Toast(err.message || '请求失败，请重试！');
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		align-items: center;
		padding: 30rpx;
		background-color: #ffffff;

		.head {
			margin-top: 90rpx;
			text-align: center;

			image {
				width: 138rpx;
				height: 138rpx;
				margin-bottom: 10rpx;
			}

			view {
				font-size: 22rpx;
				color: #a4a6bc;
			}
		}

		.login-but {
			margin-top: 150rpx;
		}

		.writeBox {
			width: 100%;
			margin: 90rpx;

			.row {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				height: 97rpx;

				label {
					margin-right: 43rpx;
				}

				input {
					border: none;
					flex: 3;
				}

				span {
					color: #32C59A;
				}
			}
		}

		button {
			width: 450rpx;
			height: 74rpx;
			color: #ffffff;
			text-align: center;
			line-height: 74rpx;
			border-radius: 50rpx;
			font-size: 31rpx;
			background: #32C59A;
		}
	}
</style>